<template>
  <f-layout class="page-layout page-table">
    <f-table-plan ref="tablePlanRef" v-bind="gridOptions" v-on="gridEvents" class="">
      <template #toolbar_right>
        <f-button type="primary" class="mr10" v-power="'add'">新增</f-button>
        <f-button class="mr10" v-power>次要</f-button>
        <f-button danger class="mr10" v-power="'delete'">删除</f-button>
      </template>
    </f-table-plan>
  </f-layout>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const tablePlanRef = ref();

const gridOptions = reactive({
  toolbarConfig: {
    title: '纯表格',
    search: false
  },
  columns: [
    { type: 'seq', title: '序', width: 50 },
    { type: 'link', field: 'name', title: '链接' },
    { type: 'money', field: 'code', title: '金额', width: 200 },
    { field: 'code', title: '医院', params: { disabledCustomCheckbox: true } },
    { type: 'image', field: 'image', title: '图像', width: 50 },
    { field: 'doseType', title: '院区' },
    { type: 'status', field: 'doseType', title: '院区', params: [
      { value: 'Develop', label: 'Develop:开发' },
      { value: 'Test', label: 'Test:测试' },
      { value: 'PM', label: 'PM:产品' },
      { value: 'Designer', label: 'Designer:设计' }
    ]},
    { type: 'status', field: 'minPackUnit', title: '科室' },
    { field: 'spec', title: '职称', width: 100 },
    { type: 'switch', field: 'isBase', title: 'switch', params: {
      events: {
        change: () => {
          return new Promise(resolve=>{
            setTimeout(() => {
              resolve(true);
            }, 1000 * 0.6);
          });
        }
      }
    }},
    { type: 'switch', field: 'isFeeItem', title: 'switch' },
    { type: 'operate', title: '操作', width: 180, params: [
      { label: '详情', power: null, disabled: (row: any) => row.isBase, click: (row: any) => {
        
      }},
      { label: '编辑', power: 'edit', show: (row: any) => !row.isFeeItem, click: (row: any) => {
        
      }},
      { label: '删除', power: 'delete', popconfirmTitle: '你确认要删除当前数据吗？', show: (row: any) => !row.isFeeItem },
      { label: '操作一' },
      { label: '操作二' }
    ]}
  ],
  data: [
    { id: '10001', name: 'Test1', code: 1234.34, doseType: 'Develop', minPackUnit: true, spec: 28.03 },
    { id: '10002', name: 'Test2', code: 9386.3345, doseType: 'Test', minPackUnit: false, spec: 22.22 },
    { id: '10003', name: 'Test3', code: 12, doseType: 'PM', minPackUnit: true, spec: 32.00 },
    { id: '10004', name: 'Test4', code: 8239746.99, doseType: 'Designer', minPackUnit: false, spec: 222223 },
    { id: '10005', name: 'Test5', code: 0, doseType: 'Develop', minPackUnit: false, spec: 30124.2 },
    { id: '10006', name: 'Test6', code: 23472309300, doseType: 'Designer', minPackUnit: false, spec: 21.00 },
    { id: '10007', name: 'Test7', code: 278.12003, doseType: 'Test', minPackUnit: true, spec: 29326987555.3 },
    { id: '10008', name: 'Test8', code: null, doseType: 'Develop', minPackUnit: true, spec: 35.22222 }
  ]
});

// 表格事件
const gridEvents = {
  // editClosed: ({ row }: any) => console.log('编辑关闭', row),
  // editActivated: ({ row }: any) => console.log('编辑激活', row)
  toolbarToolClick: (params: any) => console.log('右侧工具被点击', params)
};

</script>
<style lang="scss" scoped>
</style>